<template>
    <!-- {{Count}} -->
    求和：{{numValue}},放大10倍:{{SetNumValue}} <br>
    忠告：{{counsel}}，大写:{{SetCounsel}} <br>
<select v-model="CountValue">
    <option v-for="(item,index) in 3" :key="index" :value="item">
        {{item}}
    </option>
</select>
<button @click="add">加</button>
<button @click="min">减</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useCountStore } from '@/stores/count.ts'
import {storeToRefs} from 'pinia';

var countStore = useCountStore();

var CountValue = ref(1);
var Count = ref(0);

//使用storeToRefs将store中的数据转换为响应式的引用
var {numValue, counsel,SetNumValue,SetCounsel} = storeToRefs(countStore);
function add(){
    //第一种修改方法，摸到数据直接更改
    countStore.numValue += CountValue.value;
    // countStore.counsel += "!!";
    //第二种修改方法，使用$patch(碎片)方法
    countStore.$patch({
        numValue:89,
        counsel: "Don't mistreat the young and poor.",
    })
    //第三种修改方法，使用actions(复用)方法
    countStore.Order(CountValue.value);
}

function min(){
    countStore.numValue -= CountValue.value;
}

</script>
<style>
select,button{
    /* margin: 上，右，下，左 */
    margin: 0 10px 0 10px;
}
</style>